<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>考勤</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link rel="stylesheet" type="text/css"
			href="css/style.css" />
	</head>

	<body>
		<div id="wrap">
			<div id="top_content">
					<div id="header">
						<div id="rightheader">
							<p>
								<span v-text="date"></span>
								<br />
								<a href="javascript:;" @click="logout">安全退出</a>
							</p>
						</div>
						<div id="topheader">
							<h1 id="title">
								<a href="/ems_vue/menu.html">返回功能页</a>
							</h1>
						</div>
						<div id="navigation">
						</div>
					</div>
				<div id="content">
					<p id="whereami">
					</p>
					<h1>
						考勤信息:
					</h1>
					<table class="table">
						<tr class="table_header">
							<td>
								编号
							</td>
							<td>
								姓名
							</td>
							<td>
								加班次数
							</td>
							<td>
								迟到次数
							</td>
							<td>
								请假天数
							</td>
							<td>
								操作
							</td>
						</tr>
						<tr v-for="(kaoqin,index) in kaoqins" :key="kaoqin.id" :class="index%2==0?'row1':'row2'">
							<td>
								{{kaoqin.e_id}}
							</td>
							<td>
								{{kaoqin.name}}
							</td>
							<td>
								{{kaoqin.overtimeN}}
							</td>
							<td>
								{{kaoqin.lateN}}
							</td>
                            <td>
								{{kaoqin.leaveN}}
							</td>
							<td>
								<a :href="'/ems_vue/updateKaoqin.html?id='+kaoqin.id">修改</a>
							</td>
						</tr>
					</table>
					<p>
						<input type="button" @click="fanhui" class="button" value="返回" />
					</p>
				</div>
			</div>
			<div id="footer">
				<div id="footer_bg">
					ranlen@cl.com
				</div>
			</div>
		</div>
	</body>
</html>
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script>
	var app = new Vue({
		el:"#wrap",
		data:{
			kaoqins:[
				{id:"1",
				e_id:"1",
                name:"2",
				overtimeN:"3",
                lateN:"3",
                leaveN:"4"},
                {id:"1",
					e_id:"1",
                name:"2",
				overtimeN:"3",
                lateN:"3",
                leaveN:"4"},
                {id:"1",
					e_id:"1",
                name:"2",
				overtimeN:"3",
                lateN:"3",
                leaveN:"4"}
        ],
			date:"2022/6"
		},
		methods:{
			logout(){
				axios.get("http://localhost:8989/ems_vue/user/logout").then(res=>{});
				sessionStorage.removeItem("token");
				location.href = "/ems_vue/login.html";
			},
			fanhui(){//返回
				location.href = "/ems_vue/menu.html";
			},
			findKaoqinAll(){
				let _this = this;
				axios.get("http://localhost:8989/ems_vue/emp/findKaoqinAll").then(res=>{
					_this.kaoqins = res.data;
				});
			}
		},
		created(){
			this.findKaoqinAll();
		}
	})
</script>